import { Modal, Form } from 'antd'
import { useState } from 'react'

export default function ProModal({
    title,
    children,
    onOk,
    onCancel,
    width = 520,
    ...props
}) {
    const [form] = Form.useForm()
    const [loading, setLoading] = useState(false)

    const handleOk = async () => {
        try {
            setLoading(true)
            const values = await form.validateFields()
            await onOk?.(values)
            form.resetFields()
        } catch (error) {
            console.error('表单验证失败:', error)
        } finally {
            setLoading(false)
        }
    }

    const handleCancel = () => {
        form.resetFields()
        onCancel?.()
    }

    return (
        <Modal
            title={title}
            width={width}
            confirmLoading={loading}
            onOk={handleOk}
            onCancel={handleCancel}
            {...props}
        >
            <Form form={form} layout="vertical">
                {children}
            </Form>
        </Modal>
    )
} 